<template>
  <div class="container">

    <!--表格区域1-->
    <el-table style="width: 100%; height: 300px" border :data="tableData">
      <template v-for="(item, index) in tableHead">
        <table-column v-if="item.children && item.children.length" :key="item.id" :column-header="item" />
        <el-table-column v-else :key="index" :prop="item.prop" :label="item.label" :width="item.width"/>
      </template>
    </el-table>

    <!--表格区域-->
    <dynamic-table :table-data="tableData" :table-header="tableHead" height="600" />

  </div>
</template>

<script>

import { defineComponent, onMounted, ref } from 'vue';
import tool from '@/utils/tool'
import TableColumn from '@/components/dynamicTable/TableColumn';
import DynamicTable from '@/components/dynamicTable/DynamicTable'   // 动态表格

export default defineComponent({
  name: 'dynamic-gantt',
  components: { DynamicTable, TableColumn },
  setup () {
    let tableHead =[
                { id:1, prop: "column_name",label:"1",width:'40',children:[{id:11,label:'XXX',prop:'gx',width:'30'},{id:12,label:'YYY',prop:'tx',width:'30'}] },
            ];
            // 表格数据
    let tableData = [
                { tx: '1', column_name0: '66',column_name1: '111'},
            ];
    const initData=()=>{
        const iColumns = 20;
        const iRows = 20;
        for(let i=0;i<iColumns; i++){
            tableHead.push({id:i, prop: "column_name"+i,label:i,width:'40'});
            console.log(tableHead);
        }
        for(let i=0;i<iRows; i++){
            tableData.push({gx:i, ["column_name"+i]: i });
        }
    };
    onMounted(() => {
        initData();
    });
    return {tableData, tableHead}
  },
})
</script>

<style scoped>
.hightChart-gantt {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#container {
    max-width: 1000px;
    min-width: 800px;
    height: 800px;
    margin: 1em auto;
}
</style>